
                <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
                <style>
                        .header_hide_style {
                                display: none;
                        }
                        .header_style {
                                        height: 35px;
                                        background-color: #009EE5;
                                        border-right: 0.5px solid #FFFFFF;
                                        /*border-right: 1px solid #FFFFFF;*/
                                        /*display: none;*/
                                        color: white;
                                        font-weight: bold;
                                        text-align: center;
                        }
                        .filtros_style {
                                        color: #094FA4;
                                        font-family: Arial, sans-serif;
                                        font-weight: bold;
                                        font-size: 13px;
                        }
                        .cell_style {
                                        height: 35px;
                                        border-bottom: 1px solid #D9D9D9;
                                        /*border-left: 1px solid #D9D9D9;*/
                                        background-color: #FFFFFF;
                                        text-align: center;
                        }
                        .cell_left_style {
                                        height: 35px;
                                        /*border-left: 1px solid #D9D9D9;*/
                                        border-bottom: 1px solid #D9D9D9;
                                        /*border-right: 1px solid #D9D9D9;*/
                                        background-color: #FFFFFF;
                                        text-align: left;
                        }
                        .cell_warning_style {
                                        height: 35px;
                                        border-bottom: 1px solid #D9D9D9;
                                        background-color: #dd7e6b;
                                        text-align: center;     
                                        color: #000000;
                        }
                        .cell_warning_info_style {
                                        height: 35px;
                                        border-bottom: 1px solid #D9D9D9;
                                        background-color: #FFD966;
                                        text-align: center;     
                                        color: #000000;
                        }
						.cell_style_justify {
                                        /*height: 35px;*/
                                        border-bottom: 1px solid #D9D9D9;
                                        /*border-left: 1px solid #D9D9D9;*/
                                        background-color: #FFFFFF;
                                        /*text-align:justify;
										text-justify:inter-word;
										*/
										/*display:inline-block;
										word-wrap: break-word;
										
										white-space: pre;
										
										width: 300px;
										float: left;*/
										
										text-align:justify;
										white-space: pre-line;
										
                        }
                        .cell_width_200 {
                                        width: 300px;
                        }
						.cell_width_180 {
                                        width: 180px;
                        }
                        .cell_width_120 {
                                        width: 120px;
                        }
                        .cell_width_100 {
                                        width: 100px;
                        }
						.cell_width_85 {
                                        width: 85px;
                        }
                        .cell_width_70 {
                                        width: 70px;
                        }
                        .cell_width_60 {
                                        width: 60px;
                        }
                        .bold_style {
                                        font-weight: bold;
                        }
						.cell_width_1 {
                                        width: 1px;
                        }
                </style>
                <script type="text/javascript" src="https://www.google.com/jsapi"></script>
                <script src="https://site-itam.googlecode.com/svn/branches/lib/jquery-1.10.2.min.js"></script>
                <link href="https://site-itam.googlecode.com/svn/branches/lib/perfect-scrollbar.css" rel="stylesheet">
                <script src="https://site-itam.googlecode.com/svn/branches/lib/jquery.mousewheel.js"></script>
                <script src="https://site-itam.googlecode.com/svn/branches/lib/perfect-scrollbar.js"></script>
                <script type="text/javascript">
						
                        google.load('visualization', '1.1', {packages: ['controls','table']});
                        google.setOnLoadCallback(draw);

                        function draw() {
								var query = new google.visualization.Query('https://docs.google.com/a/bbva.com/spreadsheet/ccc?key=0AjEF14TbSVXedEpVaXR1YlNkaEZlVVNqN1BoaTJqT1E&usp=drive_web#gid=0');
                                //var query = new google.visualization.Query('https://docs.google.com/a/bbva.com/spreadsheet/ccc?key=0AuL8XqqgbAI4dDBiSEdMb0V0ZElxVHd1d1g4REZrWXc&usp=drive_web#gid=0');

                                query.send(handleQueryResponse);
                                
                        }
                        
                        function handleQueryResponse(response) {
                                if (response.isError()) {
                                        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
                                        return;
                                }
                                var data = response.getDataTable();
								
                                var category_reporto = new google.visualization.ControlWrapper({
                                                                                'controlType': 'CategoryFilter',
                                                                                'containerId': 'filtro1',
                                                                                'options': {
																					'filterColumnLabel': 'Reportó',
																					'ui': {
																						'labelSeparator' : '',
                                                                                        'label' : '',
                                                                                        'caption' : 'Selecciona',
                                                                                        'allowMultiple': true,
                                                                                        'allowTyping': false,
                                                                                        'selectedValuesLayout': 'aside'
                                                                                        }
                                                                                }
                                                                        });
                                
                                var category_area = new google.visualization.ControlWrapper({
                                                                                'controlType': 'CategoryFilter',
                                                                                'containerId': 'filtro3',
                                                                                'options': {
																					'filterColumnLabel': 'Área',
																					'ui': {
																						'labelSeparator' : '',
                                                                                        'label' : '',
                                                                                        'caption' : 'Selecciona',
                                                                                        'allowMultiple': true,
                                                                                        'allowTyping': false,
                                                                                        'selectedValuesLayout': 'aside'
                                                                                        }
                                                                                }
                                                                        });
                                
                                var category_aplicativo = new google.visualization.ControlWrapper({
                                                                                'controlType': 'CategoryFilter',
                                                                                'containerId': 'filtro2',
                                                                                'options': {
																					'filterColumnLabel': 'Aplicativo',
																					'ui': {
                                                                                        'labelSeparator' : '',
                                                                                        'label' : '',
                                                                                        'caption' : 'Selecciona',
                                                                                        'allowMultiple': true,
                                                                                        'allowTyping': false,
                                                                                        'selectedValuesLayout': 'aside'
                                                                                        }
                                                                                }
                                                                        });
                                
                                var category_estatus = new google.visualization.ControlWrapper({
                                                                                'controlType': 'CategoryFilter',
                                                                                'containerId': 'filtro4',
                                                                                'options': {
																					'filterColumnLabel': 'Estatus',
                                                                                    'ui': {
                                                                                    'labelSeparator' : '',
                                                                                    'label' : '',
                                                                                    'caption' : 'Selecciona',
                                                                                    'allowMultiple': true,
                                                                                    'allowTyping': false,
                                                                                    'selectedValuesLayout': 'aside'
                                                                                    }
                                                                                }
                                                                        });
								
                                var cssClassNames = {
                                        'headerRow': 'header_hide_style',
                                        'tableCell': 'cell_style'
                                };
                                
                                var options = {'allowHtml': true, 'cssClassNames': cssClassNames, 'sort': 'disable', 'height': '100%', 'width': '100%'};
                                
                                var table = new google.visualization.ChartWrapper({
                                                                'chartType': 'Table',
                                                                'containerId': 'table',
                                                                'options': options
                                                        });
                                
                                var formatter_fecha_reporte = new google.visualization.DateFormat({pattern: 'dd-MMM-yy'});
                                formatter_fecha_reporte.format(data, 3);
								var formatter_fecha_compromiso = new google.visualization.DateFormat({pattern: 'dd-MMM-yy'});
                                formatter_fecha_compromiso.format(data, 5);
                                
								//var formatter_incidencia = new google.visualization.PatternFormat('<p>{6}</p>');
                                //formatter_incidencia.format(data, [0, 1, 2, 3, 4, 5, 6, 7, 8], 6);
								
								//var formatter_comentario = new google.visualization.PatternFormat('<p>{7}</p>');
                                //formatter_comentario.format(data, [0, 1, 2, 3, 4, 5, 6, 7, 8], 7);
								
								var column_reporto = 0;
								var column_aplicativo = 1;
								var column_area = 2;
								var column_fechareporte = 3;
								var column_estatus = 4;
								var column_fechacompromiso = 5;
								var column_incidencia = 6;
								var column_comentario = 8;
								var column_responsable = 7;
								/*
							
								var stilo;
                                var fecha_actual = new Date();
                                fecha_actual = new Date(fecha_actual.getFullYear(), fecha_actual.getMonth(), fecha_actual.getDate());						
								var cadena_format;
                                */
                                
                                for (var row = 0; row < data.getNumberOfRows(); row++) {
									data.setCell(row, column_reporto, data.getValue(row, column_reporto), data.getFormattedValue(row, column_reporto), {'className': 'cell_style'});
									data.setCell(row, column_area, data.getValue(row, column_area), data.getFormattedValue(row, column_area), {'className': 'cell_style bold_style'});
									data.setCell(row, column_aplicativo, data.getValue(row, column_aplicativo), data.getFormattedValue(row, column_aplicativo), {'className': 'cell_style bold_style'});
									data.setCell(row, column_fechareporte, data.getValue(row, column_fechareporte), data.getFormattedValue(row, column_fechareporte), {'className': 'cell_style bold_style'});
									data.setCell(row, column_incidencia, data.getValue(row, column_incidencia), data.getFormattedValue(row, column_incidencia), {'className': 'cell_style_justify cell_width_100'});
									data.setCell(row, column_estatus, data.getValue(row, column_estatus), data.getFormattedValue(row, column_estatus), {'className': 'cell_style'});
									data.setCell(row, column_fechacompromiso, data.getValue(row, column_fechacompromiso), data.getFormattedValue(row, column_fechacompromiso), {'className': 'cell_style bold_style'});
									data.setCell(row, column_comentario, data.getValue(row, column_comentario), data.getFormattedValue(row, column_comentario), {'className': 'cell_style_justify cell_width_200'});
									data.setCell(row, column_responsable, data.getValue(row, column_responsable), data.getFormattedValue(row, column_responsable), {'className': 'cell_style'});
                                }
                                
                                var view = new google.visualization.DataView(data);
                                view.setColumns([0, 1, 2, 3, 4, 5, 6, 7, 8]);
                                
                                new google.visualization.Dashboard(document.getElementById('dashboard')).
                                                bind([category_reporto, category_area, category_aplicativo, category_estatus], table).
                                                draw(view);

                                google.visualization.events.addListener(table, 'ready',
                                        function(event) {
                                                $('#contenido_tabla').perfectScrollbar({
                                                  wheelSpeed: 20,
                                                  wheelPropagation: false
                                                });
                                                
                                                $("#table table tbody tr:last-child td").each(function(index){
                                                        if ($("#w"+(index+1)).val() > $(this).width()) {
                                                                $(this).width($("#w"+(index+1)).val());
                                                                $("#h"+(index+1)).width($("#w"+(index+1)).val());
                                                        } else {
                                                                $("#h"+(index+1)).width($(this).width());
                                                        }

                                                });
                                                $("#table table tbody tr:last-child td").each(function(index){
                                                        $("#h"+(index+1)).width($(this).width());
                                                });
                                                
                                                
                                });
                                
                        }
						function seleccionar(el) {
							var body = document.body, range, sel;
							if (document.createRange && window.getSelection) {
								range = document.createRange();
								sel = window.getSelection();
								sel.removeAllRanges();
								try {
									range.selectNodeContents(el);
									sel.addRange(range);
									range.execCommand('copy');
								} catch (e) {
									range.selectNode(el);
									sel.addRange(range);
								}
							} else if (body.createTextRange) {
								range = body.createTextRange();
								range.moveToElementText(el);
								range.select();
							}
						}
                </script>
                <div id="dashboard">
					<table width="100%">
						<tr>
							<td colspan="8" style="text-align:right;">
								<a href="#" onclick="seleccionar(document.getElementById('select_table'));">
										<img src="https://site-itam.googlecode.com/svn/branches/img/btnSelecciona.png">
								</a>
							</td>
						</tr>
						<tr>
							<td width="5%" height="50px" style="text-align:right;" class="filtros_style">Reportó:</td>
							<td width="13%" height="50px" class="filtros_style"><div id="filtro1"></div></td>
							<td width="8%" height="50px" style="text-align:right;" class="filtros_style">Aplicativo:</td>
							<td width="22%" height="50px" class="filtros_style"><div id="filtro2"></div></td>
							<td width="5%" height="50px" style="text-align:right;" class="filtros_style">Área:</td>
							<td width="18%" height="50px" class="filtros_style"><div id="filtro3"></div></td>
							<td width="5%" height="50px" style="text-align:right;" class="filtros_style">Estatus:</td>
							<td width="24%" height="50px" class="filtros_style"><div id="filtro4"></div></td>
						</tr>
						<tr>
							<td colspan="8">
								<div id="select_table">
								<table id="headers_table"  width="100%" height="35px" class="filtros_style">
									<tr>
										<td id="h1" class="header_style"><input id="w1" type="hidden" value="131"/>Reportó</td>
										<td id="h2" class="header_style"><input id="w2" type="hidden" value="101"/>Aplicativo</td>
										<td id="h3" class="header_style"><input id="w3" type="hidden" value="90"/>Área</td>
										<td id="h4" class="header_style"><input id="w4" type="hidden" value="60"/>Fecha Reporte</td>
										<td id="h5" class="header_style"><input id="w5" type="hidden" value="55"/>Estatus</td>
										<td id="h6" class="header_style"><input id="w6" type="hidden" value="60"/>Fecha Compromiso</td>
										<td id="h7" class="header_style"><input id="w7" type="hidden" value="180"/>Incidencia</td>
										<td id="h8" class="header_style"><input id="w8" type="hidden" value="131"/>Responsable</td>
										<td id="h9" class="header_style"><input id="w9" type="hidden" value="180"/>Comentario</td>
										
									</tr>
								</table>
								<div id="contenido_tabla" style="height:500px;overflow:hidden;position:relative;">
									<table width="100%">
										<tr>
											<td><div id="table"></div></td>
										</tr>
									</table>
								</div>
								</div>
							</td>
						</tr>
					</table>
					
                </div>
